<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 1 -->
    <canvas id="myCanvas" style="border:1px solid #000000;" width="200" height="100"></canvas>
    <br>
    <!-- 2 -->
    <canvas id="myCanvA" style="border:1px solid #000000;" width="200" height="100"></canvas>
    <br>
    <!-- 3 -->
    <canvas id="myCanvaS" style="border:1px solid #000000;" width="200" height="100"></canvas>
    <br>
    <!-- 4 -->
    <canvas id="myCanva" style="border:1px solid #000000;" width="200" height="100"></canvas>
    <span id="proprSen">(200,100)</span>
    <br>
    <!-- 5 -->
    <canvas id="myCanv" style="border:1px solid #000000;" width="200" height="100"></canvas>
</body>
<script>
    // 1
    const c=document.getElementById('myCanvas')
    const ctx=c.getContext('2d')
    ctx.strokeStyle='#FF0000'
    ctx.strokeRect(10,20,150,75)

    // 2
    const cA=document.getElementById('myCanvA')
    const ctxA=cA.getContext('2d')
    ctxA.fillStyle='#FF0000'
    ctxA.fillRect(10,20,150,75)

    // 3
    const cc=document.getElementById('myCanvaS')
    const ctxX=cc.getContext('2d')
    ctxX.moveTo(0,0)
    ctxX.lineTo(200,100)
    ctxX.stroke()

    // 4
    const a=document.getElementById('myCanva')
    a.onmousemove=function(v){
        document.getElementById('proprSen').innerHTML=(`${v.offsetX},${v.offsetY}`)
    }

    // 5
    const aC=document.getElementById('myCanv')
    const aCX=aC.getContext('2d')
    aCX.arc(100,50,30,0,1.5*Math.PI,false)
    aCX.fillStyle='#FF0000'
    aCX.fill()  //实心
    aCX.stroke()  //空心


    aCX.font="20px Georgia";
    aCX.fillStyle='#000000'
    aCX.strokeText("Hello World!",10,50); //空心
    aCX.fillText("Hello World!",10,80);//实心
</script>
</html>